<template>
	<div class="main">
		<carousel-comp :banner="bannerList"></carousel-comp>
		<!-- 精选内容 -->
		<el-main>
			<h2>精选内容</h2>
			<water-fall @loading-more="loadingMoreHandle" ref="waterfall">
				<menu-card :menuList="menuList"></menu-card>
			</water-fall>
		</el-main>
	</div>
</template>

<script>
import CarouselComp from './CarouselComp.vue';
import { getMenus } from '@/api/menu';
import waterFall from '@/components/WaterFall.vue';
import { getBannerList } from '@/api/banner';
import MenuCard from '@/components/MenuCard.vue';
export default {
	components: { CarouselComp, waterFall, MenuCard },
	data() {
		return {
			menuList: [],
			bannerList: [],
			page: 1,
			pages: 0,
		};
	},
	methods: {
		loadingMoreHandle() {
			// 获取下一页数据
			// 判断是否是最后一页 当前页 对比 总页数
			if (this.page >= this.pages) {
				// 隐藏加载更多
				this.$refs.waterfall.loading = false;
				this.$message.info('已经是最后一页');
				return;
			}
			// 1. 页码 +1
			this.page++;
			getMenus({ page: this.page }).then((res) => {
				const { list } = res.data;
				this.menuList.push(...list);
				this.$refs.waterfall.loading = false;
			});
			// 加载内容
		},
	},
	mounted() {
		getMenus({ page: this.page }).then((res) => {
			this.menuList = res.data.list;
			this.pages = Math.ceil(res.data.total / res.data.page_size);
			// console.log(res);
		});
		// 在页面展示前 在后台 获取到 banner 的数据
		getBannerList().then((res) => {
			this.bannerList = res.data.list;
		});
	},
};
</script>

<style scoped>
.main {
	width: 1200px;
	margin: 0 auto;
}
</style>